﻿@using TamoCRM.Web.Framework.Users
@model TamoCRM.Web.Mvc.Areas.Admin.Models.Contacts.ContactCreateModel

@{
    ViewBag.Title = "Tìm kiếm Contact";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}

<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        try {
            ace.settings.check('breadcrumbs', 'fixed');
        }
        catch (e) {

        }
    </script>

    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="/Home">Trang chủ</a>
        </li>

        <li>
            <a href="javascript:void(0);">Danh mục</a>
        </li>
        <li class="active">Contact</li>
    </ul>
</div>

<div class="page-content">
    <div class="page-header">
        <h1>Tìm kiếm Contact</h1>
    </div>
    <!-- /.page-header -->

    <div class="row">
        <div class="col-xs-12">
            <!-- PAGE CONTENT BEGINS -->
            @using (Ajax.BeginForm("FilterContactSearchFast", "ContactFilter", new AjaxOptions { HttpMethod = "POST" }, new { enctype = "multipart/form-data", @class = "form-horizontal", role = "form", id = "filter_contact_search_fast_form" }))
            {
                @Html.AntiForgeryToken()
                <div class="form-group">
                    <div class="col-sm-12" id="alert">
                    </div>
                </div>
                <div style="border: 1px solid #c5d0dc; padding: 15px 20px 0 20px;">
                    <div class="form-group" style="margin-left: 20px;">
                        <div class="col-sm-1">
                            Họ và Tên
                        </div>
                        <div class="col-sm-3">
                            <input id="txtName" type="text" style="width: 90%;" />
                        </div>
                        <div class="col-sm-1" style="width: 9%;">
                            Điện thoại
                        </div>
                        <div class="col-sm-3" style="width: 24%;">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="icon-phone"></i>
                                </span>
                                <input id="txtMobile" type="text" />
                            </div>
                        </div>
                        <div class="col-sm-1">
                            Email
                        </div>
                        <div class="col-sm-3">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="icon-envelope"></i>
                                </span>
                                <input id="txtEmail" type="text" />
                            </div>
                        </div>
                    </div>
                </div>
            }

            <div class="space-6"></div>
            <button id="btnGoFilter" class="btn-primary" style="float: right; margin-left: 10px;">Tìm kiếm</button>
            <button id="btnClearFilter" class="btn-primary" style="float: right;">Xóa trang</button>
            <div class="clearfix"></div>

            <div class="space-6"></div>
            <table id="grid-table"></table>
            <div id="grid-pager"></div>

            <!-- PAGE CONTENT ENDS -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</div>

<script type="text/javascript">
    var url = 'admin/api/contact/filtersearchfast?userId={0}&name={1}&mobile={2}&email={3}&branchId={4}';
    var grid_selector = "#grid-table";
    var heades = ['Id', 'Họ và tên', 'Level', 'Email', 'Ngày', 'Sáng/Chiều', 'Giờ', 'Nội dung cuộc gọi gần nhất', 'Trạng thái chăm sóc', 'Trạng thái gọi', 'Tổng số cuộc gọi', 'TVTS', 'Chức năng'];
    var model = [
        { name: 'Id', index: 'Id', editable: false, sorttype: 'string', editoptions: { disabled: true }, width: '0px' },
        { name: 'Fullname', index: 'Fullname', editable: false, width: '90px', sorttype: 'string' },
        { name: 'LevelId', index: 'LevelId', editable: false, width: '40px', sorttype: 'string', align: 'center', formatter: levelFomatter },
        { name: 'Email', index: 'Email', editable: false, width: '70px', sorttype: 'string', align: 'center' },
        { name: 'AppointmentDate', index: 'AppointmentDate', editable: false, width: '60px', align: 'center', formatter: 'date', formatoptions: { srcformat: 'Y-m-dTH:i:s', newformat: 'd/m/Y' } },
        { name: 'AppointmentAmPm', index: 'AppointmentDate', editable: false, width: '70px', align: 'center', formatter: stringFormatter },
        { name: 'AppointmentTime', index: 'AppointmentDate', editable: false, width: '40px', align: 'center', formatter: 'date', formatoptions: { srcformat: 'Y-m-dTH:i:s', newformat: 'H:i' } },
        { name: 'CallInfo', index: 'CallInfo', editable: false, width: '200px', sorttype: 'string', align: 'left' },
        { name: 'StatusCareId', index: 'StatusCareId', editable: false, width: '70px', formatter: statusCareFomatter },
        { name: 'StatusMapId', index: 'StatusMapId', editable: false, width: '70px', formatter: statusMapFomatter },
        { name: 'CallAmount', index: 'CallAmount', editable: false, width: '60px', align: 'center' },
        { name: 'UserId', index: 'UserId', editable: false, width: '80px', formatter: userFomatter },
        {
            name: 'Function', index: 'Function', editable: false, width: '55px', align: 'center', formatter: "dynamicLink",
            formatoptions: {
                cellValue: function (cellValue, rowId, rowData, options) {
                    return '<div style="color:#810c15;margin:5px;"><a style="cursor: pointer;" onclick="return openDialog(' + rowData.Id + ')"><img style="width:16px; height:16px;" src="../../../../Images/edit-16.png"/></a></div>';
                }
            }
        }
    ];

    function deleteClick(id) {
        var r = confirm("Có phải bạn muốn xóa contact này?");
        if (r == true) {
            var newUrl = "/admin/api/contact/delete/{0}".format(id);
            $.ajax({
                type: 'GET',
                url: newUrl,
                success: function (data) {
                    jQuery(grid_selector).jqGrid().trigger("reloadGrid");
                },
                error: function (request, status, ex) {
                    $("#alert").addClass("alert alert-block alert-error");
                    $("#alert").html("Xóa contact không thành công.");
                }
            });
        }
        return false;
    }

    $(document).ready(function () {
        bindGlobalStatusMaps();
        var branchId = '@ViewBag.BranchId';
        var userId = '@(UserContext.GetCurrentUser().UserID)';
        setupGridWithoutEdit("#grid-table", "#grid-pager", url.format(userId, '', '', '', branchId), "admin/api/contact/edit", "Id", "Danh sách Contact", heades, model);
        $(grid_selector).jqGrid("setGroupHeaders", {
            useColSpanStyle: true,
            groupHeaders: [
                { startColumnName: "Fullname", numberOfColumns: 3, titleText: '<table style="width:100%;border-spacing:0px;"><tr><td style="text-align:center;height:40px;"><b>Thông tin Contact</b></td></tr></table>' },
                { startColumnName: "AppointmentDate", numberOfColumns: 3, titleText: '<table style="width:100%;border-spacing:0px;"><tr><td style="text-align:center;"><b>Thông tin lịch hẹn gọi lại</b></td></tr></table>' },
                { startColumnName: "CallInfo", numberOfColumns: 3, titleText: '<table style="width:100%;border-spacing:0px;"><tr><td style="text-align:center;"><b>Tình trạng chăm sóc</b></td></tr></table>' }
            ]
        });

        $(window).keydown(function (e) {
            if (e.keyCode == 13) {
                e.preventDefault();
                $("#btnGoFilter").click();
            }
        });

        $("#btnGoFilter").click(function (e) {
            e.preventDefault();

            // Param
            var name = $('#txtName').val();
            var email = $('#txtEmail').val();
            var mobile = $('#txtMobile').val();
            if (name.length == 0 && email.length == 0 && mobile.length == 0) {
                alertError("Nội dung tìm kiếm không phù hợp.");
                return;
            }

            if (!validateMobile(mobile)) {
                alertError("Số điện thoại tìm kiếm không đúng định dạng.");
                return;
            }

            if (!validateEmail(email)) {
                alertError("Email tìm kiếm không đúng định dạng.");
                return;
            }

            // Format Url
            alertHide();
            var newUrl = '/' + url.format(userId, name, mobile, email, branchId);
            jQuery(grid_selector).jqGrid().setGridParam({ url: newUrl }).trigger("reloadGrid");
        });
        $("#btnClearFilter").click(function (e) {
            e.preventDefault();

            // Param
            $('#txtName').val('');
            $('#txtEmail').val('');
            $('#txtMobile').val('');
        });
    });
</script>
